<template>
    <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '120px' } }"
        :wrapper-col="{ style: { width: 'calc(100% - 130px)' } }" ref="form" :model="formData" :rules="rules">
        <div class="form-panel-box">
            <div class="form-panel borker-page">

                <a-form-model-item class="yuan-form-item yuan-form-col5" label="所属单位">
                    <span class="yuan-form-input">{{detailInfo.placeUnit}}</span>
                </a-form-model-item>
                <a-form-model-item class="yuan-form-item yuan-form-col5" label="能力等级">
                    <span class="yuan-form-input">{{detailInfo.capabilityLevel}}</span>
                </a-form-model-item>
                <div class="clear-both"></div>
                <a-form-model-item label="相关证书、证明" class="yuan-form-row" v-if="detailInfo.certificate">

                    <div class="imagePreBox" v-for="item in detailInfo.certificate">
                        <img class="imagePreview" :src="item" alt="" @click="imgClick(item)">
                    </div>
                </a-form-model-item>
                <div class="clear-both" style="margin-top:10px"></div>
                <a-form-model-item class="yuan-form-row" label="简介">
                    <span class="yuan-form-input">{{detailInfo.skillBriefIntroduction}}</span>
                </a-form-model-item>

                <div style="margin:20px 0">
                    <div class="case-list" v-for="(item,index) in caseList">
                        <div class="case-title">从业案例{{index+1}}</div>
                        <a-form-model-item class="yuan-form-item yuan-form-col5" label="项目名称">
                            <span class="yuan-form-input">{{item.name}}</span>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-item yuan-form-col5" label="日期">
                            <span class="yuan-form-input">{{item.date}}</span>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-item yuan-form-col5" label="转化类型">
                            <span class="yuan-form-input">{{item.type}}</span>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-item yuan-form-col5" label="促成转化金额">
                            <span class="yuan-form-input">{{item.money}}</span>
                        </a-form-model-item>

                    </div>
                </div>

                <a-form-model-item label="相关图片" class="yuan-form-row" v-if="detailInfo.skillCorrelationPicture">

                    <div class="imagePreBox" v-for="item in detailInfo.skillCorrelationPicture">
                        <img class="imagePreview" :src="item" alt="" @click="imgClick(item)">
                    </div>
                </a-form-model-item>
            </div>
        </div>
        <PreviewImageVue :imgList="imageUrls" @close="previewVisible=false" :previewVisible="previewVisible" />
    </a-form-model>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import UploadVue from "@/components/upload.vue";
import PreviewImageVue from "@/components/previewImage.vue";

@Component({
    name: "dom",
    components: { UploadVue,PreviewImageVue },
})
export default class index extends Vue {
    @Prop({ default: {} }) detailInfo!: any;
    @Watch("detailInfo")
    visibleChange() {
        if (this.detailInfo.practitionerCase) {
            this.caseList = this.detailInfo.practitionerCase;
        }else{
             this.caseList=[]
        }
    }
    formData: any = {};
    formLoading = false;
    rules = {};
    onClose() {
        //(this.$refs.form as any).resetFields();
        this.$emit("closeDrawer");
    }

    mounted() {
        if (this.detailInfo.practitionerCase) {
            this.caseList = this.detailInfo.practitionerCase;
        }else{
            this.caseList=[]
        }
    }

    uploadChangeHead(e) {
        this.formData.headPortrait = e.length ? e[0].url : "";
    }

    caseList: any[] = [];

    
    previewVisible = false;
    imageUrls: string[] = [];
    imgClick(url: string) {
        this.previewVisible = true;
        this.imageUrls = [url];
    }
    closeImg() {
        this.previewVisible = false;
    }
}
</script>
<style lang="scss">
.borker-page {
    .case-list {
        background-color: #f7f7f7;
        padding: 10px 15px;
        border-radius: 6px;
        margin-bottom: 10px;
    }
    .case-title {
        font-weight: bold;
        font-size: 15px;
        color: #102040;
    }
    .case-btn-box {
        text-align: right;
        padding-top: 20px;
    }
    .case-btn {
        margin-left: 20px;
    }
}
</style>